<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>mainPage</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style>
        #mainPage {
            background: url(../image/main/mainBg1.png) no-repeat center;
            background-size: 100% 100%;
        }
        .aui-bar-nav{
              background-color: #fff;
        }
        .header-left,
        .header-right{
          border: none;
        }
        .header-left{
            padding: 26px 10px 10px 17px!important;
        }
        .header-right{
          margin:26px 17px 0 0!important;
        }
        .aui-bar-nav a{
          color: #000!important;
        }
        .header-left img{
          width: 24px;
        }
        .header-right img{
          display: inline-block;
          width: 7px;
          margin: 0 0 3px 4px;
        }
        .releaseBtn{
          width: 47px;
          position: absolute;
          left: 50%;
          bottom: 50px;
          transform: translate(-50%,0);
          background: rgba(255, 255, 255, 0);
        }
        .title{
            margin-left: 11px;
        }
        .actionSheet{
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          background: #fff;
          border-radius: 15px 15px 0 0;
          z-index: 10;
        }
        .releaseItemTitle{
          font-size: 18px;
          text-align: center;
          margin: 23px 0 22px 0;
        }
        .actionSheet-mask{
          width: 100%;
          position: fixed;
          left: 0px;
          top: 0px;
          z-index: 10;
          background: rgba(0, 0, 0, 0.3);
        }
        .moreSection{
          width: 90%;
          background: url(../image/main/userSection@2x.png) no-repeat center;
          background-size: 100% 100%;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 30;
          box-shadow: 1px 0px 15px #000;
        }
        .msgBtn{
          display: inline-block;
          width: 24px;
          margin: 22px 0 13px 17px;
        }
        .userPhoto{
          width: 81px;
          height: 81px;
          border-radius: 50%;
          margin: 0 auto;
        }
        .userLevel{
           display: inline-block;
           width: 38px;
           margin: 0 0 -2px 3px;
        }
        .userLevelSaller{
          width: 46px;
          margin: 0 0 -2px 5px;
        }
        .userInfonSection{
          background: url(../image/main/rightArrow@2x.png) no-repeat 92%;
          background-size: 3%;
        }
        .userInfonSection p{
           text-align:center;
        }
        .firstP{
          font-size: 19px;
          color: #000;
          margin: 6px 0 5px 0;
        }
        .lastP{
           line-height: 12px;
        }
        .aui-grid{
          background-color: rgba(255, 255, 255, 0);
          padding: 0 40px;
        }
        .icons{
          width: 54px;
          height: 53px;
          margin: 0 auto;
        }
        .paddingL{
          padding-left: 40px;
        }
        .paddingR{
          padding-right: 40px;
        }
        /*适配屏幕320px*/
        @media (max-width: 320px){
          .msgBtn{
            margin: 15px 0 9px 12px;
          }
          .aui-grid{
            padding: 0 30px;
          }
          .userPhoto{
            width: 54px;
            height: 54px;
          }
          .firstP{
            font-size: 13px;
            margin: 4px 0 0px 0;
          }
          .userLevel {
              width: 26px;
          }
          .lastP{
            font-size: 10px
          }
          .aui-grid-label{
            font-size: 13px;
          }
          .icons{
            width: 44px;
            height: 43px;
          }
        }
        .releaseMenuList{
          height: 380px;
          overflow-x: scroll;
          padding: 10px 0;
          -webkit-overflow-scrolling : touch;
        }
        .aui-list .aui-list-item {
            letter-spacing: 2px;
            margin: 0 0 0px 15px;
            height: 56px;
            line-height: 56px;
            font-size: 17px;
            padding-left: 0;
            border-bottom: 1px solid rgba(204,204,204,.2);
            background-image: -webkit-linear-gradient(90deg,rgba(221, 221, 221, 0),rgba(221, 221, 221, 0) 50%,transparent 50%);
            background-image: linear-gradient(90deg,rgba(221, 221, 221, 0),rgba(221, 221, 221, 0) 50%,transparent 50%);
        }
        .aui-margin-r-15 {
            margin-right: 23px !important;
        }
        .getVilidCode {
            float: right;
            text-align: right;
            font-size: 17px;
            color: #141414 !important;
            background-color: rgba(255, 255,255, 0)!important;
            padding-right: 0;
        }
        .rightArrow {
            float: right;
            width: 8px;
            height: 15px;
            margin: 6px 0 0 5px;
        }
        .colorGery{
          color:#969696!important;
        }
        .rightCheck {
            width: 55px;
            height: 55px;
            font-size: 15px;
            padding-left: 5px;
            text-align: center;
            line-height: 55px;
            margin-top: -15px;
            float: right;
            position: relative;
            z-index: 1;
            text-indent: 0;
            margin-right: 10px;
        }
        .rightCheck:nth-child(2),
        .rightCheck:nth-child(3){
           margin-right: 0;
        }
        .rightCheck input {
            width: 55px;
            height: 55px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 5;
            background-color: rgba(255, 255, 255, 0);
            border: none;
        }
        .sexCheck:checked {
            background: url(../image/sexCheck@2x.png) no-repeat -5px center;
            background-size: 115%;
            background-color: rgba(255, 255, 255, 0);
            border: none;
        }
        .sexCheck:before, .sexCheck:after {
            border: none!important;
        }
        .checkClass-parent{
          padding-right: 5px;
        }
        .checkClass{
          display: inline-block;
          width: 18px;
          height: 18px;
          margin-bottom: -3px;
          margin-right: -5px;
        }
        .releaseBtn1{
          width: 55px;
          height: 48px;
          margin: 22px auto 25px;
          background: rgba(255, 255, 255, 0);
        }
        .releaseBtn1 img{
          width: 47px;
        }
        /***************************去掉点击效果*****************************************************/
        .aui-list.aui-form-list .aui-list-item:active,
        .getVilidCode:active{
            color: #141414!important;
            background-color: transparent!important;
        }
          /***************************去掉点击效果*****************************************************/
        /*适配屏幕320px*/
        .slides-enter-active, .slides-leave-active {
          transition: opacity .3s;
        }
        .slides-enter, .slides-leave-to  {
          opacity: 0;
        }

        .slidesLeft-enter-active {
          transition: all .3s ease;
        }
        .slidesLeft-leave-active {
          transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
        .slidesLeft-enter, .slidesLeft-leave-to {
          transform: translateX(-300px);
        }

        .slidesBottom-enter-active {
          transition: all .3s ease;
        }
        .slidesBottom-leave-active {
          transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
        .slidesBottom-enter, .slidesBottom-leave-to {
          transform: translateY(800px);
        }
    </style>
</head>

<body>
    <div id='mainPage' v-bind:style="{height:wHeight}">
      <header class="aui-bar aui-bar-nav">
          <a class="aui-pull-left aui-btn aui-btn-outlined header-left" v-on:click="showMore()">
                 <img src="../image/main/more@2x.png">
          </a>
          <div class="aui-title"></div>
          <a class="aui-pull-right aui-btn aui-btn-outlined header-right" v-on:click="">
                 <div>西安<img src="../image/main/dropArrow@2x.png"></div>
          </a>
      </header>
        <div class="releaseBtn" v-on:click="showMenu()">
               <img src="../image/main/releaseBtn@2x.png">
        </div>
       <!-- 弹出更多个人 -->
        <transition name="slides">
          <div class="actionSheet-mask" id="actionSheet-mask2" v-bind:style="{height:wHeight}" v-if="showMask1"  @click.self="hidUserSection()">
          </div>
        </transition>
        <transition name="slidesLeft">
            <div class="moreSection" id="moreSection" v-bind:style="{height:wHeight}" v-if="showMask1" >
               <img class="msgBtn" src="../image/main/msgBtn@2x.png" @click="gotoMsg()">
               <div class="userInfonSection" @click="gotoUserInfo()">
                    <img class="userPhoto" :src="userPhotoSrc">
                     <p class="firstP">{{userName}}<img class="userLevel" src="../image/main/le@2x.png"></p>
                     <p class="lastP">{{userPhone}}</p>
               </div>
               <section class="aui-grid">
                    <div class="aui-row">
                        <div class="aui-col-xs-6" v-for="(iconsItem,index) in iconsList1"  @click="gotoUserItem(index)">
                            <img class="icons" :src="iconsItem.iconsItemPic">
                            <div class="aui-grid-label">{{iconsItem.iconsItemName}}</div>
                        </div>
                    </div>
                </section>
           </div>
     </transition>
     <!-- 弹出更多个人 -->
     <!-- 弹出更多商家 -->
      <transition name="slides">
        <div class="actionSheet-mask" id="actionSheet-mask3" v-bind:style="{height:wHeight}" v-if="showMask2"  @click.self="hidUserSection()">
        </div>
      </transition>
      <transition name="slidesLeft">
          <div class="moreSection" id="moreSectionSaller" v-bind:style="{height:wHeight}" v-if="showMask2" >
             <img class="msgBtn" src="../image/main/msgBtn@2x.png"  @click="gotoMsg()">
             <div class="userInfonSection" @click="gotoUserInfo()">
                  <img class="userPhoto" :src="userPhotoSrc">
                   <p class="firstP">{{userName}}<img class="userLevel userLevelSaller" src="../image/ident@2x.png"></p>
                   <p class="lastP">{{userPhone}}</p>
             </div>
             <section class="aui-grid">
                  <div class="aui-row">
                      <div class="aui-col-xs-6" v-for="(iconsItem,index) in iconsList2"  @click="gotoUserItem(index)">
                          <img class="icons" :src="iconsItem.iconsItemPic">
                          <div class="aui-grid-label">{{iconsItem.iconsItemName}}</div>
                      </div>
                  </div>
              </section>
         </div>
   </transition>
   <!-- 弹出更多商家 -->
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/fastclick.js"></script>
<script type="text/javascript">
    var usertokenData = $api.getStorage('tokenData');
    var userInfotokenData = $api.getStorage('userInfo');
    apiready = function() {
       api.parseTapmode();
       initUserInfo();
       //////接收编辑用户资料
       api.addEventListener({
           name: 'setUserInfo'
       }, function(ret, err) {
              app.userName = ret.value.UserInfo.nickname;
              app.userPhotoSrc = ret.value.UserInfo.avatar;
       });
       api.addEventListener({
           name: 'isLogin'
       }, function(ret, err) {
             initUserInfo();
             usertokenData = ret.value.key;
       });
       api.addEventListener({
           name: 'isRegist'
       }, function(ret, err) {
             userInfotokenData = ret.value.key;
       });
    };
    // 去掉iOS的点击延时问题
    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);
     /////查询用户是否存在
        function initUserInfo(){
          var usertokenData = $api.getStorage('tokenData');
            if($api.getStorage('tokenData')){
                $c.ajax({
                    url: 'User/getUser',
                    method:'post',
                    values:{
                        userId : usertokenData.user_id
                    },
                    need_login : true ,
                    success: function(ret) {
                      if(ret) {
                        $api.setStorage('userInfo', ret);
                        //console.log(JSON.stringify(ret));
                      }
                    },
                    err:function(err){
                     console.log(JSON.stringify(err));
                    }
                });
            }
        }
    ////初始化页面
    var app = new Vue({
        el: '#mainPage',
        data: {
            wHeight: '',
            showMask1 : false,
            showMask2 : false,
            showMask3 : false,
            userName : '',
            userPhone : '',
            userPhotoSrc : '',
            iconsList1 : [
              {
                iconsItemName : '我的钱包',
                iconsItemPic : '../image/main/user1@2x.png'
              },
              {
                iconsItemName : '身份认证',
                iconsItemPic : '../image/main/user2@2x.png'
              },
              {
                iconsItemName : '我的发布',
                iconsItemPic : '../image/main/user3@2x.png'
              },
              {
                iconsItemName : '我的订单',
                iconsItemPic : '../image/main/user4@2x.png'
              },
              {
                iconsItemName : '邀请注册',
                iconsItemPic : '../image/main/user5@2x.png'
              },
              {
                iconsItemName : '系统设置',
                iconsItemPic : '../image/main/user6@2x.png'
              }
            ],
            iconsList2 : [
              {
                iconsItemName : '我的钱包',
                iconsItemPic : '../image/main/user1@2x.png'
              },
              {
                iconsItemName : '公司认证',
                iconsItemPic : '../image/main/user22@2x.png'
              },
              {
                iconsItemName : '我的发布',
                iconsItemPic : '../image/main/user3@2x.png'
              },
              {
                iconsItemName : '邀请注册',
                iconsItemPic : '../image/main/user5@2x.png'
              },
              {
                iconsItemName : '系统设置',
                iconsItemPic : '../image/main/user6@2x.png'
              }
            ],
        },
        methods: {
            init: function() {
              /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                this.wHeight = (wh) + 'px';
            },
            /////点击发布按钮
            showMenu : function(){
                  if(!usertokenData){
                          mainPageMethod.isComplatelogin();
                  }
                  else{
                          mainPageMethod.isComplateRegist();
                  }
            },
            //////点击更多按钮
            showMore :function(){
              //console.log(userInfotokenData+"时间恩么")
                 if(!usertokenData){
                    bf_common_view.bf_win.openWin('login_pwd', './login/');
                 }else{
                     if(userInfotokenData.usertype == 1){
                       var _resetPhone = userInfotokenData.mobile;////手机加密码页面传来手机号
                           this.showMask1 = !this.showMask1;/////如果是个人打开
                           this.userName = userInfotokenData.nickname;
                           this.userPhone  = _resetPhone.replace(_resetPhone.substr(3,4), "****");/////显示带星号号码
                           this.userPhotoSrc = userInfotokenData.avatar;
                      }else{
                         this.showMask2 = !this.showMask2;/////如果是商家打开
                     }
                 }
            },
            ////点击阴影处关闭更多
            hidUserSection : function(){
               this.showMask1 = false;/////如果是个人
               this.showMask2 = false;////如果是商家
            },
            //////点击更多中个人头像
            gotoUserInfo : function(){
              if(userInfotokenData.usertype == 1){
                  ////如果是个人
                  bf_common_view.bf_win.openWin('userInfo', './main/');////如果是个人
              }else{
                  ////如果是商家
                  bf_common_view.bf_win.openWin('sallerInfo', './sallerInfo/');////如果是商家
              }
            },
            /////打开消息页面
            gotoMsg : function(){
                bf_common_view.bf_win.openWin('message', './message/');
            },
            /////点击更多中按钮
            gotoUserItem : function(n){
              if(userInfotokenData.usertype == 1){//////如果是个人
                  switch(n){
                      case 0:    bf_common_view.bf_win.openWin('walle', './main/');break;
                      case 1:    bf_common_view.bf_win.openWin('identity', './personIdentity/');break;
                      case 2:    bf_common_view.bf_win.openWin('myRelease', './myRelease/');break;
                      case 3:    bf_common_view.bf_win.openWin('orderDetail', './order/');break;
                      case 4:    bf_common_view.bf_win.openWin('invite', './invite/');break;
                      case 5:    bf_common_view.bf_win.openWin('setup', './setup/');break;
                      default: break;
                  }
              }
               else{//////如果是商家
                 switch(n){
                     case 0:    bf_common_view.bf_win.openWin('walle', './main/');break;
                     case 1:    bf_common_view.bf_win.openWin('sallerIdentity', './sallerIdentity/');break;
                     case 2:    bf_common_view.bf_win.openWin('myRelease', './myRelease/');break;
                     case 3:    bf_common_view.bf_win.openWin('invite', './invite/');break;
                     case 4:    bf_common_view.bf_win.openWin('setup', './setup/');break;
                     default: break;
                 }
               }
            }
        },
        mounted:function(){
            this.init();
        }
    });
    var mainPageMethod = {
      /////判断用户是否登录过
        isComplatelogin : function(){
          //console.log(userInfotokenData+'未登录')
          if(usertokenData == undefined){
             bf_common_view.bf_win.openWin('login_pwd', './login/');
          }else{
            api.openFrame({
                name: 'release_frame',
                url: './release/release_frame.html',
                rect: {
                    x: 0,
                    y: 0,
                    w: 'auto',
                    h: 'auto'
                },
                animation: {
                   type:"movein",
                   subType:"from_bottom",
                   duration:200
                }
            });
          }
        },
         /////判断用户是否完善用户信息
        isComplateRegist : function(){
          //console.log(userInfotokenData+'未注册')
          if(userInfotokenData == undefined||userInfotokenData == ''){
               bf_common_view.bf_win.openWin('regist', './');
          }else{
                api.openFrame({
                    name: 'release_frame',
                    url: './release/release_frame.html',
                    rect: {
                        x: 0,
                        y: 0,
                        w: 'auto',
                        h: 'auto'
                    },
                    animation: {
                       type:"movein",
                       subType:"from_bottom",
                       duration:200
                    }
                });
            }
        }
    };
</script>

</html>
